<template>
	<!-- dialog窗口 用于添加和编辑的弹窗-->
	<el-dialog :title="dialogTitle"
		@close="dialogClose"
		:visible="dialogVisible">
		<el-form :model="stuForm"
			:rules="stuRules"
			ref="addStuRuleForm">
			<el-form-item label="头像">
				<el-upload class="uploadAvatar"
					ref="uploadAvatar"
					action="https://chst.vip/students/uploadStuAvatar"
					list-type="picture-card"
					:on-success="uploadSuccess"
					:on-remove="removeAvatar"
					:limit="limit"
					name="headimgurl"
					:file-list="headimgList"
					:multiple="false">
					<i class="el-icon-plus"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="姓名"
				prop="name">
				<el-input v-model="stuForm.name"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="项目地址"
				prop="productUrl">
				<el-input v-model="stuForm.productUrl"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="班级"
				prop="class">
				<el-input v-model="stuForm.class"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="年龄"
				prop="age">
				<el-input v-model="stuForm.age"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="城市"
				prop="city">
				<el-input v-model="stuForm.city"
					autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="学历"
				prop="degree">
				<el-input v-model="stuForm.degree"
					autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="描述"
				prop="description">
				<el-input v-model="stuForm.description"
					autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer"
			class="dialog-footer">
			<el-button @click="this.HIDE_DIALOG">取 消</el-button>
			<el-button type="primary"
				@click="confirmClick('addStuRuleForm')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
	import { mapState, mapMutations, mapActions } from "vuex";
	//引入发起请求的api
	import * as api from "../../api"
	export default {
		computed: {
			...mapState(['dialogVisible', 'dialogTitle', "currentRow"])
		},
		data() {
			return {
				showAvatar: true,
				headimgList: [],//回显的头像
				limit: 1,//上传文件的数量
				stuRules: {
					name: [
						{ required: true, message: '请输入名字', trigger: 'blur' }
					],
					class: [
						{ required: true, message: '请输入班级', trigger: 'blur' }
					],
					degree: [
						{ required: true, message: '请输入学历', trigger: 'blur' }
					],
					city: [
						{ required: true, message: '请输入城市', trigger: 'blur' }
					],
					productUrl: [
						{ required: true, message: '请输入项目地址', trigger: 'blur' }
					],
					age: [
						{ required: true, message: '请输入年龄', trigger: 'blur' }
					],
					description: [
						{ required: true, message: '请输入描述', trigger: 'blur' }
					]
				},
				stuForm: {
					name: '',
					productUrl: '',
					headimgurl: '',
					class: '',
					age: '',
					city: '',
					degree: '',
					description: ''
				},
				oldFrom: {} //储存stuForm的初始值,便于后续清空dialog内容
			}
		},
		created() {
			//储存stuForm的初始值,便于后续清空dialog内容
			this.oldFrom = { ...this.stuForm };
		},
		methods: {
			...mapMutations(["SHOW_DIALOG", "HIDE_DIALOG", "CHANGE_DIALOG_TITLE"]),
			...mapActions(["GET_STULIST"]),
			dialogClose() {//dialog关闭时触发的回调
				//清空输入框的值;
				// console.log(12313123);
				this.HIDE_DIALOG();
				//清空dialog表单数据
				this.stuForm = this.oldFrom;
				//清空回显头像的数组
				this.headimgList = [];
				this.limit = 1;
			},
			uploadSuccess(r) {
				// console.log(r);
				//把返回来的图片网络地址,添加给stuForm 传给服务器 保存到数据库
				if (r.state) {
					console.log(r.headimgurl);
					this.stuForm.headimgurl = r.headimgurl;
					console.log(this.headimgList);
					if (this.dialogTitle === "编辑学员信息") {
						setTimeout(() => {
							//把headimgList列表内容设为当前项
							this.headimgList = [{ url: r.headimgurl }]
						}, 500)
					}
				} else {
					this.$message.error('上传失败')
				}
			},
			removeAvatar(r) {

			},
			confirmClick(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// console.log("校验成功进来了");
						// console.log(this.dialogTitle);
						//关闭dialog
						this.HIDE_DIALOG()
						//表单校验成功
						//发送请求 问题:如何知道点击确定的时候,此时请求增加接口还是编辑接口?
						//判断dialogTitle
						if (this.dialogTitle === "增加学员信息") {
							// console.log("标题验证成功进来了");
							//发起增加请求
							console.log(this.stuForm); //这个就是表单中收集到的用户输入数据
							api.addStuApi(this.stuForm)
								.then(res => {
									console.log(res);
									if (res.data.state) {
										//增加成功
										//重新发起请求,更新表格内容
										this.GET_STULIST()
										this.$message.success("添加成功")
									} else {
										//增加失败
										this.$message.error("增加失败")
									}
								})
						} else {
							//发起编辑请求
							// console.log(this.stuForm);
							api.updateStuApi(this.stuForm)
								.then(res => {
									console.log(res);
									if (res.data.state) {
										//修改成功,更新视图
										this.GET_STULIST()
										this.$message.success("修改成功")
									} else {
										//更新失败,比如你在更新的时候,这条数据被别人删除
										this.$message.error("更新失败,没有做任何修改,或者数据不存在")
										//更新页面数据
										this.GET_STULIST()
									}
								})
						}
					} else {
						this.$message.error('请将内容填写完整')
					}
				})
			}
		},
		watch: {
			currentRow(newVal) { //监听传入的row的是数据变化
				// console.log(newVal);
				//数据回显,从vuex中获取到当前回显的数据
				// console.log(this.currentRow);
				// console.log(this.stuForm);
				this.stuForm = this.currentRow; //回显变化的row
				//回显头像
				this.headimgList = [{ url: this.currentRow.headimgurl }]
				//编辑的时候让Limit变成2
				this.limit = 2;
			},
		}
	}
</script>
<style>
.uploadAvatar {
	text-align: left;
}
.el-upload-list__item.is-success,
.el-upload--picture-card {
	width: 100px !important;
	height: 100px !important;
	line-height: 100px !important;
}
.el-dialog__header {
	padding: 0 !important;
	line-height: 60px;
}
</style>